<!--业务步骤查询-->
<template>
	<div class="app-container business-step-list">
		<!--高级查询弹窗-->
		<div id="advanced-query-form-dialog">
			<el-dialog v-model="ui.dialogQueryVisible" custom-class="advanced-query-class" title="条件：" :show-close="false">
				<el-tooltip effect="light" content="该查询为精确查询，请输入准确的查询条件" placement="top-start">
					<i class="question-icon ico-wen">
						<svg-icon icon-class="question"></svg-icon>
					</i>
				</el-tooltip>
				<div>
					<el-form id="advanced-el-form" ref="conforderform" :model="advancedQueryform" inline>
						<!-- 渲染问题列表 -->
						<section v-for="(value, index) in advancedQueryform.queryColumn" :key="index">
							<section v-if="index === 0" class="yd-flex">
								<el-form-item label="字段" label-width="120px">
									<div>
										<el-select v-model="advancedQueryform.queryColumn[index].column" popper-class="select-coutom" :popper-append-to-body="false">
											<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
										</el-select>
									</div>
								</el-form-item>
								<el-form-item label="值" label-width="40px">
									<el-input v-model="advancedQueryform.queryColumn[index].value" auto-complete="off" style="width: 200px"></el-input>
								</el-form-item>
								<svg-icon icon-class="orderadd" class="icon-style" circle @click="addItems()"></svg-icon>
							</section>
							<section v-if="index > 0" class="yd-flex">
								<el-form-item>
									<div class="yd-flex">
										<el-select
											v-model="advancedQueryform.queryColumn[index].operator"
											popper-class="select-coutom"
											style="width: 70px"
											size="small"
											:popper-append-to-body="false"
										>
											<el-option label="并且" value="and"></el-option>
											<el-option label="或者" value="or"></el-option>
										</el-select>
									</div>
								</el-form-item>

								<el-form-item label="字段">
									<el-select v-model="advancedQueryform.queryColumn[index].column" popper-class="select-coutom" :popper-append-to-body="false">
										<el-option
											v-for="item in options"
											:key="item.value"
											style="background-color: #ff000000"
											:label="item.label"
											:value="item.value"
										></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="值" label-width="40px">
									<el-input v-model="advancedQueryform.queryColumn[index].value" auto-complete="off" style="width: 200px"></el-input>
								</el-form-item>
								<svg-icon icon-class="orderdel" class="icon-style" circle @click="rmItems(index)"></svg-icon>
							</section>
						</section>
					</el-form>
					<div style="display: flex; justify-content: center">
						<el-row class="mt-20">
							<el-button type="primary" @click="advancedQuery">确认</el-button>
							<el-tooltip effect="light" content="去除高级查询条件筛选" placement="right">
								<el-button @click="clearQuery">取消</el-button>
							</el-tooltip>
						</el-row>
					</div>
				</div>
			</el-dialog>
		</div>

		<yd-form class="yd-form-wraper" :options="formOptions" :model="queryParams" @form-init="formInited" @search="formInited">
			<template #form-btn>
				<el-button type="primary" icon="Search" @click="searchHandler">查 询</el-button>
				<el-button style="margin-left: 15px" type="primary" :disabled="downLoadDisabled" @click="downloadHandler">下载</el-button>
				<el-button style="margin-left: 15px" type="primary" @click="gridLabelBtnClick">自定义列</el-button>
				<el-button type="primary" @click="advancedQueryBtnClick">高级查询</el-button>
			</template>
		</yd-form>

		<el-tabs v-model="activeTabs" size="small" @tab-change="onTabChange">
			<el-tab-pane label="定性" name="tab_0">
				<!--列表-->
				<YdCard>
					<YdTable
						ref="tableRef"
						:formData="queryParams"
						:tableConfig="tableConfig"
						:tableData="tableData.data"
						@sizeChangeHandler="queryEnsureData(true)"
						@currentChangeHandler="queryEnsureData()"
						@sortChangeHandler="queryEnsureData()"
						@rowClick="clickData"
					>
						<template #expand="data">
							<YdTable
								:formData="alarmFormData"
								:tableConfig="alarmTableConfig"
								:tableData="data.data.alarmlist"
								@sortChangeHandler="handleClickAlarm"
							>
							</YdTable>
						</template>
					</YdTable>
				</YdCard>
			</el-tab-pane>
			<el-tab-pane label="非定性" name="tab_1" :class="selectTabHandle(activeTabs)">
				<!--列表-->
				<YdCard>
					<YdTable
						ref="isUnsureTableRef"
						:formData="queryParams"
						:tableConfig="isUnsureTableConfig"
						:tableData="isUnsureTableData.data"
						@sizeChangeHandler="queryUnsureData(true)"
						@currentChangeHandler="queryUnsureData()"
						@sortChangeHandler="queryUnsureData()"
						@rowClick="clickData"
					>
					</YdTable>
				</YdCard>
			</el-tab-pane>
		</el-tabs>

		<!-- 自定义列弹出层 -->
		<custom-column ref="customColumnRef" pageType="step"></custom-column>
	</div>
</template>
<script setup name="BusinessStep" lang="tsx">
import { useRoute, useRouter } from 'vue-router';
import { queryBusinessStepListPage, exportBusinessStepList } from '@/api/bpm/business/setp_detail_list';
import { getBaseAlarmList } from '@/api/bpm/alarm/busi_detail_alarm';
// import SetpDetail from './step_detail.vue';
import { parseTime, toDecimalFormate } from '@/utils/common';
import CustomColumn from '@/components/CustomColumn/index.vue';
// import YdTable from '@/components/YdTable/index.vue';
import { onMounted, ref, reactive, getCurrentInstance, onActivated, computed, watch, nextTick, Ref, h } from 'vue';
import useUserStore from '@/store/modules/userinfo';

const instance = getCurrentInstance();
const proxy = instance?.proxy;
const n = [];
const route = useRoute();
const router = useRouter();
// 用于获取dom的实例
const systemRef = ref();
const customColumnRef = ref<InstanceType<typeof CustomColumn>>();

const tableRef = ref();
// 未定性
const isUnsureTableRef = ref();

const options = ref([
	{ label: '请求IP', value: 'requestIp' },
	{ label: '响应IP', value: 'responseIp' },
	{ label: '自定义返回码', value: 'customResCode' },
	{ label: '用户标识', value: 'userIdentify' },
]);

const selectVal1 = ref('');
const selectVal2 = ref('');
const officeName = 'khgz.office.name.configuration';
const setpShow = ref(false);
const stepParams = reactive({});
// const  downloading =ref(false)
//  const is_alarmshow = ref(false)
const alarmTypeId = ref('');
const loading = ref(false);
// 总条数
const total = ref(0);
//查询参数
const queryParams = reactive<FormModelType>({
	businessHallType: 2, //分支机构
	operatorType: 2, //分支机构编码
	stepCodeList: [],
	areaCodeList: [],
	businessCodeList: [],
	dataCenter: [],
	pageNum: 1,
	pageSize: 10,
	advancedQuery: [],
});
const activeTabs = ref('tab_0'); //默认展示定性选项卡

const a = [];
// initQuery(route.query,queryParams)

let cloneQueryParams = reactive<FormModelType>({});

//页面控制
const ui = reactive({
	//高级查询弹窗
	dialogQueryVisible: false,
});
//高级查询表单
const advancedQueryform = reactive({
	queryColumn: [{ operator: 'and', column: 'requestIp', value: '' }],
});
//自定义列表弹窗展示字段
const columns = ref([]);

// 定性表格数据
const tableData = reactive<any>({
	data: [],
});

// 定性表格配置
const tableConfig = reactive<TableConfigType>({
	columns: [
		{
			prop: 'systemName',
			label: '系统名称',
			width: 120,
			render(row: any) {
				if (!row.systemName) {
					return '<span> - </span>';
				} else {
					return `<span>${row.systemName}</span>`;
				}
			},
		},
		{
			prop: 'businessName',
			label: '业务名称',
			width: 120,
			render: (row: any) => {
				if (!row.businessName) {
					return '<span> - </span>';
				} else {
					return `<span>${row.businessName}</span>`;
				}
			},
		},
		{
			prop: 'stepType',
			label: '步骤类型',
			width: 120,
			render: (row: any) => {
				if (!row.stepType) {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.stepType}</span>;
				}
			},
		},
		{
			prop: 'stepName',
			label: '步骤名称',
			width: 120,
			render: (row: any) => {
				if (row.stepName == undefined || row.stepName == null || row.stepName == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.stepName}</span>;
				}
			},
		},
		{
			prop: 'businessHall',
			label: '单位编码',
			width: 120,
			render: (row: any) => {
				if (row.businessHall == undefined || row.businessHall == null || row.businessHall == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.businessHall}</span>;
				}
			},
		},
		{
			prop: 'businessHallName',
			label: '单位',
			width: 120,
			render: (row: any) => {
				if (row.businessHallName == undefined || row.businessHallName == null || row.businessHallName == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.businessHallName}</span>;
				}
			},
		},
		{
			prop: 'operatorId',
			label: '操作员编码',
			width: 120,
			render: (row: any) => {
				if (row.operatorId == undefined || row.operatorId == null || row.operatorId == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.operatorId}</span>;
				}
			},
		},
		{
			prop: 'operatorName',
			label: '操作员',
			width: 120,
			render: (row: any) => {
				if (row.operatorName == undefined || row.operatorName == null || row.operatorName == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.operatorName}</span>;
				}
			},
		},
		{
			prop: 'menuId',
			label: '菜单编码',
			hide: true,
			width: 120,
			render: (row: any) => {
				if (row.menuId == undefined || row.menuId == null || row.menuId == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.menuId}</span>;
				}
			},
		},
		{
			prop: 'menuName',
			label: '菜单名称',
			hide: true,
			width: 120,
			render: (row: any) => {
				if (row.menuName == undefined || row.menuName == null || row.menuName == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.menuName}</span>;
				}
			},
		},
		{
			prop: 'pageLabelId',
			label: '页签',
			hide: true,
			width: 120,
			render: (row: any) => {
				if (row.pageLabelId == undefined || row.pageLabelId == null || row.pageLabelId == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.pageLabelId}</span>;
				}
			},
		},
		{
			prop: 'pageSize',
			label: '页面大小(条)',
			hide: true,
			sortable: true,
			width: 150,
			render: (row: any) => {
				if (row.pageSize == undefined || row.pageSize == null || row.pageSize == '') {
					return <span style="width:150px"> - </span>;
				} else {
					return <span style="width:150px">{row.pageSize}</span>;
				}
			},
		},
		{
			prop: 'buttonId',
			label: '按钮',
			hide: true,
			width: 120,
			render: (row: any) => {
				if (row.buttonId == undefined || row.buttonId == null || row.buttonId == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.buttonId}</span>;
				}
			},
		},
		{
			prop: 'buttonName',
			label: '按钮名称',
			hide: true,
			width: 120,
			render: (row: any) => {
				if (row.buttonName == undefined || row.buttonName == null || row.buttonName == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.buttonName}</span>;
				}
			},
		},
		{
			prop: 'dealState',
			label: '响应状态',
			width: 120,
			render: (row: any) => {
				if (row.dealState == undefined || row.dealState == null || row.dealState == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.dealState}</span>;
				}
			},
		},

		{
			prop: 'isCompletion',
			label: '完整性',
			hide: true,
			width: 120,
			render: (row: any) => {
				if (row.isCompletion == undefined || row.isCompletion == null || row.isCompletion == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.isCompletion}</span>;
				}
			},
		},
		{
			prop: 'userIdentify',
			label: '用户标识',
			hide: true,
			width: 120,
			render: (row: any) => {
				if (row.userIdentify == undefined || row.userIdentify == null || row.userIdentify == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.userIdentify}</span>;
				}
			},
		},

		{
			prop: 'customResCode',
			label: '自定义返回码',
			width: 150,
			render: (row: any) => {
				if (row.customResCode == undefined || row.customResCode == null || row.customResCode == '' || row.customResCode == 'null') {
					return <span style="width:150px"> - </span>;
				} else {
					return <span style="width:150px">{row.customResCode}</span>;
				}
			},
		},
		{
			prop: 'alarmCount',
			label: '告警数',
			sortable: true,
			width: 120,
			operation: [
				{
					text: undefined,
					rowKey: 'alarmCount',
					handler: (scope: any) => handleClickAlarm(scope.row),
				},
			],
		},
		{
			prop: 'startTime',
			label: '开始时间',
			sortable: true,
			width: 170,
			// render: (row: any) => {
			// 	return parseTime(row.startTimeUsec / 1000);
			// },
		},
		{
			prop: 'endTime',
			label: '结束时间',
			sortable: true,
			width: 170,
			// render: (row: any) => {
			// 	return parseTime(row.endTimeUsec / 1000);
			// },
		},
		{
			prop: 'dealTime',
			label: '办理时长',
			sortable: true,
			width: 170,
			render(row: any) {
				if (row.dealTime > 5000000) {
					return <span style="color:red">{toDecimalFormate(row.dealTime, 'wm')}</span>;
				} else {
					return <span>{toDecimalFormate(row.dealTime, 'wm')}</span>;
				}
				// return
			},
		},
		{
			prop: 'exclusiveIndicator',
			label: '专属指标',
			hide: true,
			width: 120,
			isExclusive: true,
			render: (row: any) => {
				if (row.exclusiveIndicator == undefined || row.exclusiveIndicator == null || row.exclusiveIndicator == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.exclusiveIndicator}</span>;
				}
			},
		},
	],
	pagination: {
		pageNum: 1,
	},
	expandHide: true,
	rowClick: true,
	loading: false,
});

// 非定性表格数据
const isUnsureTableData = reactive<any>({
	data: [],
});

// 非定性表格配置
const isUnsureTableConfig = reactive<TableConfigType>({
	columns: [
		{
			prop: 'systemName',
			label: '系统名称',
			width: 120,
			render(row: any) {
				if (!row.systemName) {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.systemName}</span>;
				}
			},
		},
		{
			prop: 'businessName',
			label: '业务名称',
			width: 120,
			render: (row: any) => {
				if (row.businessName == undefined || row.businessName == null || row.businessName == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.businessName}</span>;
				}
			},
		},
		{
			prop: 'stepType',
			label: '步骤类型',
			width: 120,
			render: (row: any) => {
				if (row.stepType == undefined || row.stepType == null || row.stepType == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.stepType}</span>;
				}
			},
		},
		{
			prop: 'stepName',
			label: '步骤名称',
			width: 120,
			render: (row: any) => {
				if (row.stepName == undefined || row.stepName == null || row.stepName == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.stepName}</span>;
				}
			},
		},
		{
			prop: 'businessHall',
			label: '单位编码',
			width: 120,
			render: (row: any) => {
				if (row.businessHall == undefined || row.businessHall == null || row.businessHall == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.businessHall}</span>;
				}
			},
		},
		{
			prop: 'businessHallName',
			label: '单位',
			width: 120,
			render: (row: any) => {
				if (row.businessHallName == undefined || row.businessHallName == null || row.businessHallName == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.businessHallName}</span>;
				}
			},
		},
		{
			prop: 'operatorId',
			label: '操作员编码',
			width: 120,
			render: (row: any) => {
				if (row.operatorId == undefined || row.operatorId == null || row.operatorId == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.operatorId}</span>;
				}
			},
		},
		{
			prop: 'operatorName',
			label: '操作员',
			width: 120,
			render: (row: any) => {
				if (row.operatorName == undefined || row.operatorName == null || row.operatorName == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.operatorName}</span>;
				}
			},
		},
		{
			prop: 'menuId',
			label: '菜单编码',
			hide: true,
			width: 120,
			render: (row: any) => {
				if (row.menuId == undefined || row.menuId == null || row.menuId == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.menuId}</span>;
				}
			},
		},
		{
			prop: 'menuName',
			label: '菜单名称',
			hide: true,
			width: 120,
			render: (row: any) => {
				if (row.menuName == undefined || row.menuName == null || row.menuName == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.menuName}</span>;
				}
			},
		},
		{
			prop: 'pageLabelId',
			label: '页签',
			hide: true,
			width: 120,
			render: (row: any) => {
				if (row.pageLabelId == undefined || row.pageLabelId == null || row.pageLabelId == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.pageLabelId}</span>;
				}
			},
		},
		{
			prop: 'pageSize',
			label: '页面大小(条)',
			hide: true,
			sortable: true,
			width: 150,
			render: (row: any) => {
				if (row.pageSize == undefined || row.pageSize == null || row.pageSize == '') {
					return <span style="width:150px"> - </span>;
				} else {
					return <span style="width:150px">{row.pageSize}</span>;
				}
			},
		},
		{
			prop: 'buttonId',
			label: '按钮',
			hide: true,
			width: 120,
			render: (row: any) => {
				if (row.buttonId == undefined || row.buttonId == null || row.buttonId == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.buttonId}</span>;
				}
			},
		},
		{
			prop: 'buttonName',
			label: '按钮名称',
			hide: true,
			width: 120,
			render: (row: any) => {
				if (row.buttonName == undefined || row.buttonName == null || row.buttonName == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.buttonName}</span>;
				}
			},
		},
		{
			prop: 'dealState',
			label: '响应状态',
			width: 120,
			render: (row: any) => {
				if (row.dealState == undefined || row.dealState == null || row.dealState == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.dealState}</span>;
				}
			},
		},

		{
			prop: 'isCompletion',
			label: '完整性',
			hide: true,
			width: 120,
			render: (row: any) => {
				if (row.isCompletion == undefined || row.isCompletion == null || row.isCompletion == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.isCompletion}</span>;
				}
			},
		},
		{
			prop: 'userIdentify',
			label: '用户标识',
			hide: true,
			width: 120,
			render: (row: any) => {
				if (row.userIdentify == undefined || row.userIdentify == null || row.userIdentify == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.userIdentify}</span>;
				}
			},
		},

		{
			prop: 'customResCode',
			label: '自定义返回码',
			width: 150,
			render: (row: any) => {
				if (row.customResCode == undefined || row.customResCode == null || row.customResCode == '' || row.customResCode == 'null') {
					return <span style="width:150px"> - </span>;
				} else {
					return <span style="width:150px">{row.customResCode}</span>;
				}
			},
		},
		{
			prop: 'startTime',
			label: '开始时间',
			sortable: true,
			width: 170,
			// render: (row: any) => {
			// 	return parseTime(row.startTimeUsec / 1000);
			// },
		},
		{
			prop: 'endTime',
			label: '结束时间',
			sortable: true,
			width: 170,
			// render: (row: any) => {
			// 	return parseTime(row.endTimeUsec / 1000);
			// },
		},
		{
			prop: 'dealTime',
			label: '办理时长',
			sortable: true,
			width: 170,
			render(row: any, val: any) {
				if (row.dealTime > 5000000) {
					return <span style="color:red">{toDecimalFormate(row.dealTime, 'wm')}</span>;
				} else {
					return <span>{toDecimalFormate(row.dealTime, 'wm')}</span>;
				}
				// return
			},
		},
		{
			prop: 'exclusiveIndicator',
			label: '专属指标',
			hide: true,
			width: 120,
			isExclusive: true,
			render: (row: any) => {
				if (row.exclusiveIndicator == undefined || row.exclusiveIndicator == null || row.exclusiveIndicator == '') {
					return <span style="width:120px"> - </span>;
				} else {
					return <span style="width:120px">{row.exclusiveIndicator}</span>;
				}
			},
		},
	],
	pagination: {
		pageNum: 1,
	},
	loading: false,
});

const formOptions = ref<FormOptionType>([
	{
		type: 'select',
		prop: 'systemId',
		label: '业务系统',
		api: {
			name: 'queryAppSystemOptions',
			params: { isStatus: 1 },
		},
		cascaders: [
			{
				cascadersParams: 'businessCodeList',
				api: {
					name: 'queryBusinessOptions',
				},
			},
		],
	},
	{
		type: 'select',
		prop: 'businessCodeList',
		label: '业务名称',
		attrs: {
			multiple: true,
		},
	},
	{
		type: 'select',
		prop: 'dealState',
		label: '响应状态',
		isInitValue: false,
		children: [
			{
				label: '失败',
				value: 0,
			},
			{
				label: '成功',
				value: 1,
			},
		],
	},

	{
		type: 'select',
		prop: 'dataCenterList',
		label: '数据中心',
		api: {
			name: 'queryDataCenter',
		},
		isInitValue: false,
		cascaders: [
			{
				cascadersParams: 'areaCodeList',
				api: {
					name: 'queryCityAreaOptions',
				},
			},
		],
	},
	{
		type: 'select',
		prop: 'areaCodeList',
		label: '归属城市',
		attrs: {
			multiple: true,
		},
	},
	{
		type: 'date-picker',
		prop: 'dateRange',
		span: 8,
		dateType: 'datetimerange',
		label: '时间范围',
	},
	{
		type: 'input',
		prop: 'businessHallIdOrName',
		label: '分支机构',
		span: 7,
		slots: {
			prepend: {
				render() {
					return (
						<el-select v-model={queryParams.businessHallType} style="width: 128px">
							<el-option label="分支机构" value={2} />
							<el-option label="分支机构编码" value={1} />
						</el-select>
					);
				},
			},
		},
	},
	{
		type: 'input',
		prop: 'operatorIdOrName',
		label: '操作员',
		span: 7,
		slots: {
			prepend: {
				render() {
					return (
						<el-select v-model={queryParams.operatorType} style="width: 115px">
							<el-option label="操作员" value={2} />
							<el-option label="操作员编码" value={1} />
						</el-select>
					);
				},
			},
		},
	},
]);

//验证
const fromRule = reactive({
	queryColumnValue: [{ required: true, message: '', trigger: 'blur' }],
});
const downloadStartTime = ref('');
const downloadEndTime = ref('');
const alarmFormData = reactive<FormModelType>({
	systemId: null,
	relvanceDataId: '',
	startTime: '',
	endTime: '',
});
// 告警数展开列表配置
const alarmTableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '告警对象',
			prop: 'alarmObject',
			align: 'center',
			width: 320,
		},
		{
			label: '告警级别',
			prop: 'alarmLevelName',
			align: 'center',
			width: 90,
		},
		{
			label: '告警现象',
			prop: 'alarmContext',
			align: 'center',
			width: 380,
		},
		{
			label: '告警类型',
			prop: 'alarmIndicatorName',
			align: 'center',
			width: 120,
		},
		{
			label: '返回码',
			prop: 'alarmResultCode',
			align: 'center',
			width: 80,
		},
		{
			label: '告警时间',
			prop: 'alarmTriggerTime',
			align: 'center',
			sortable: true,
			width: 170,
		},
		{
			label: '专属指标',
			prop: 'exclusiveIndicator',
			align: 'center',
		},
	],
	loading: true,
	noDataText: '暂无告警数据',
});

const downLoadDisabled = computed(() => {
	if (activeTabs.value === 'tab_0') {
		return tableData.data.length === 0;
	} else {
		return isUnsureTableData.data.length === 0;
	}
});

watch(
	() => queryParams.alarmTypeId,
	(val) => {
		alarmTypeId.value = val;
	}
);

onMounted(() => {
	customColumnRef.value?.useCustomColumn('bpm4.customField.stepDetailList', tableConfig.columns);
	// }
});
initQuery(route.query, queryParams);

// 格式化传过来的参数
function initQuery(query: anyObj, formData: FormModelType) {
	try {
		let data = JSON.parse(query.data);
		for (let key in data) {
			formData[key] = data[key];
		}
	} catch {
		for (let key in query) {
			formData[key] = query[key];
		}
	}
	console.log('query', query);
	console.log('query', formData);
}

function formInited() {
	initQuery(route.query, queryParams);
	queryEnsureData(true);
	queryUnsureData(true);
}

function onTabChange() {
	queryParams.pageNum = 1;
	queryParams.pageSize = 10;
}

/**
 * 搜索按钮
 */
function searchHandler() {
	if (activeTabs.value === 'tab_0') {
		queryEnsureData(true);
	} else {
		queryUnsureData(true);
	}
}

//tab是否选择样式
function selectTabHandle(selectVal: any) {
	if (selectVal) {
		return 'selectTabClass';
	}
	return 'noSelectTabClass';
}

function clickData(row: any, event: any, column: any) {
	console.log('clickData');
	if (event.property === 'alarmCount') {
		handleClickAlarm(row);
	}
}
// 获取告警数列表数据
function handleClickAlarm(row: any) {
	console.log('row.expanded', row.expanded);
	if (row.expanded !== undefined) return;
	alarmTableConfig.loading = true;
	// tempSysProcessId = row.id;
	alarmFormData.systemId = row.systemId;
	alarmFormData.relvanceDataId = row.id;
	alarmFormData.startTime = parseTime(row.startTime, '{y}-{m}-{d} {h}:{i}') + ':00';
	alarmFormData.endTime = parseTime(row.endTime, '{y}-{m}-{d} {h}:{i}') + ':00';
	getBaseAlarmList({
		...alarmFormData,
		// headerFlag: currentHeaderFlag,
		// alarmIndicatorIds: [],
		// alarmLevelIds: [],
		// dealState: [],
		// businessCodes: [],
		pageNum: 1,
		pageSize: 999,
		// segmentIds: [],
		// stepCodes: [],
	}).then((res) => {
		row.expanded = !row.expanded;
		console.log('row.expanded', row.expanded);
		// console.log(row.expanded)
		nextTick(() => {
			tableRef.value?.toggleRowExpansion(row, row.expanded);
			alarmTableConfig.loading = false;
		});
		if (res.code !== 0) {
			return;
		}
		for (let i of tableData.data) {
			if (i.id === row.id) {
				i.alarmlist = res.data.data;
			}
		}
	});
}

/**
 * 列表查询-未定性
 */
//
function queryUnsureData(initPageNum?: boolean) {
	if (initPageNum) {
		queryParams.pageNum = 1;
	}
	queryParams.isUnsure = 1;
	setpShow.value = false;
	downloadStartTime.value = queryParams.startTime;
	downloadEndTime.value = queryParams.endTime;
	if (activeTabs.value) delete activeTabs.value;
	isUnsureTableConfig.loading = true;
	queryBusinessStepListPage(queryParams).then((res: ApiResponse) => {
		if (res.code === 0) {
			let data = res.data.data;
			for (let i of data) {
				i.is_Itshow = false;
				i.expanded = false;
				i.alarmlist = [];
			}
			isUnsureTableData.data = data;
			// isUnsureTableConfig.pagination!.total = res.data.total;
		} else {
			isUnsureTableData.data = [];
			// isUnsureTableConfig.pagination!.total = 0;
			proxy?.$message.warning(res.msg);
		}
		// isUnsureTableConfig.loading = false;
	}).finally(() => {
		isUnsureTableConfig.loading = false;
	})
}

//  列表查询-定性
function queryEnsureData(initPageNum?: boolean) {
	if (initPageNum) {
		queryParams.pageNum = 1;
	}
	queryParams.isUnsure = 0;
	setpShow.value = false;
	downloadStartTime.value = queryParams.startTime;
	downloadEndTime.value = queryParams.endTime;
	tableConfig.loading = true;
	queryBusinessStepListPage(queryParams).then((res: ApiResponse) => {
		if (res.code === 0) {
			let data = res.data.data;
			for (let i of data) {
				i.is_Itshow = false;
				i.expanded = false;
				i.alarmlist = [];
			}
			tableData.data = data;
			tableConfig.pagination!.total = res.data.total;
		} else {
			tableData.data = [];
			tableConfig.pagination!.total = 0;
			proxy?.$message.warning(res.msg);
		}
		tableConfig.loading = false;
	});
}

/**
 * 下载
 */
function downloadHandler() {
	let list = [];
	let new_list = [];
	for (let i of tableConfig.columns) {
		if (!i.hide) {
			list.push(i.label);
			new_list.push(i.prop);
		}
	}
	queryParams.displayMappingFields = new_list;
	queryParams.displayFields = list;
	// queryParams.systemName = systemRef.value?.getSelected().label;
	let data = {
		submitterId: useUserStore().userInfo?.userId,
		submitterName: useUserStore().userInfo?.username,
		submitTime: parseTime(new Date()),
		serviceCode: 'business-monitor',
		moduleName: 'BPM_WEB_MAIN',
		exportBtnName: '业务步骤查询列表下载',
		docExportParameterJson: JSON.stringify(queryParams),
		exportFileName: '业务步骤查询列表.xlsx',
		docHandleType: '1',
	};

	exportBusinessStepList(data).then((response) => {
		proxy?.$message.success('已加入下载队列，请查看＂↓＂');
	});
}
/**
 * 自定义列按钮
 */
function gridLabelBtnClick() {
	customColumnRef.value?.handleOpen('bpm3.customField.stepDetailList', tableConfig.columns);
}
/**
 * 高级查询按钮
 */
function advancedQueryBtnClick() {
	if (advancedQueryform.queryColumn.length === 0) {
		advancedQueryform.queryColumn.push({
			operator: 'and',
			column: 'requestIp',
			value: '',
		});
	}
	ui.dialogQueryVisible = true;
}
/**
 * 高级查询弹窗，查询按钮
 */
function advancedQuery() {
	let queryColumn: any[] = [];
	//剔除空参
	advancedQueryform.queryColumn.forEach((row, index) => {
		//if (row.value.trim() !== '') {
		queryColumn.push(row);
		// }
	});
	queryParams.advancedQuery = queryColumn;
	searchHandler();

	ui.dialogQueryVisible = false;
}

/**
 * 高级查询弹窗，清空查询按钮
 */
function clearQuery() {
	advancedQueryform.queryColumn = [];
	queryParams.advancedQuery = [];
	searchHandler();
	ui.dialogQueryVisible = false;
}
/**
 * 添加高级查询条件行
 */
function addItems() {
	advancedQueryform.queryColumn.push({
		operator: 'and',
		column: 'requestIp',
		value: '',
	});
	// }
}
/**
 * 删除高级查询条件行
 * @param index 下标
 */
function rmItems(index: any) {
	advancedQueryform.queryColumn.splice(index, 1);
	proxy?.$message.success('移除成功');
}

/**
 * 关闭，初始化数据
 */
function close() {
	ui.dialogQueryVisible = false;
	tableConfig.columns = JSON.parse(JSON.stringify(columns.value));
	advancedQueryform.queryColumn = [];
}
/**
 * 明细
 * @param row grid行
 */
function handleDetails(row: any) {
	router.push({
		path: '/business/businessDetail',
		query: {
			businessDetailId: row.id,
			startTime: row.startTime,
			startTimeUsec: row.startTimeUsec,
			endTime: row.endTime,
			endTimeUsec: row.endTimeUsec,
		},
	});
}
// /**
//  * 排序
//  * @param column
//  */
// function sortHandler(column) {
// 	tableSort(queryParams, column, queryGrid);
// }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
:deep(.el-table__expand-icon) {
	display: none;
}

:deep(.indicator-count) {
	color: #ff9a0c;
	cursor: pointer;
	text-decoration: underline;
}

:deep(.el-input-group__prepend) {
	border: 1px;
}

:deep(.el-icon-edit-outline) {
	background: url('@/assets/icons/png/edit.png') no-repeat;
	background-size: 18px;
	&:before {
		content: '';
		font-size: 16px;
		visibility: hidden;
	}
}
.el-form-item__label {
	line-height: 36px;
}

:deep(.el-dialog__header .el-dialog__title) {
	background-image: url('@/assets/images/bpm/dialog/init-title.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	color: #ffffff;
	font-size: 16px;
	display: inline-block;
	width: 140px;
	padding-left: 5px;
}

.el-checkbox {
	color: #606266;
	font-weight: 500;
	font-size: 14px;
	position: relative;
	cursor: pointer;
	display: inline-block;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin-right: 10px;
	margin-left: 20px;
}

/*高级查询弹框样式*/
.icon-style {
	margin-top: 5px;
	font-size: 26px;
	color: #dcdfe6;
}
:deep(.advanced-query-class) {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: calc(100% - 30px);
	max-width: calc(100% - 30px);
	min-width: 800px;
	.el-dialog__body {
		flex: 1;
		// overflow: auto;
	}
	.el-form-item {
		margin-bottom: 0;
	}
}
:deep(#advanced-query-form-dialog) {
	.el-dialog {
		border: 2px solid #2beded;
		box-shadow: 0px 0px 10px #2beded inset;
		background-color: rgba(19, 30, 60, 0.8);
	}
	.el-button {
		color: #1b2a5a;
		font-size: 16px;
		width: 160px;
	}
	.el-dialog__body {
		padding: 20px 60px;
	}
	.el-input__prefix {
		top: 5px;
		left: 10px;
	}
	.el-input__inner {
		text-align: center;
	}

	.el-select-dropdown__list {
		text-align: center;
	}
	.el-select-dropdown.el-popper {
		border: none;
		border-radius: 10px;
	}
	.el-scrollbar {
		color: #fff;
		border-radius: 6px;
		background-color: #121d40;
	}
	.el-select-dropdown .popper__arrow {
		display: none;
	}
	.el-select-dropdown__item {
		text-align: center;
		color: #fff;

		&:before {
			content: '';
			position: absolute;
			top: 5px;
			right: 0.063rem;
			width: 0.25rem;
			height: 1.563rem;
			background: #2beded;
			vertical-align: center;
			transform: scaleX(0);
			transform-origin: right;
			-webkit-transition: -webkit-transform 475ms cubic-bezier(0.8, 0, 0.2, 1);
			transition: -webkit-transform 475ms cubic-bezier(0.8, 0, 0.2, 1);
		}
	}
	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		background-color: rgba(255, 154, 12, 0);

		&:before {
			transform: scaleX(1);
		}
	}
	.el-select-dropdown__item.selected {
		color: #2beded;
	}
	.select-coutom {
		top: auto !important;
		left: auto !important;
	}
	.yd-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.el-form--inline .el-form-item {
		margin-right: 10px;
		.el-input {
			width: auto;
		}
	}
}
#advanced-query-form-dialog .el-button--default {
	background-color: transparent;
	color: #2beded;
	border: 1px solid #2beded;
}
#advanced-query-form-dialog section {
	margin-bottom: 10px;
}
.mt-20 {
	margin-top: 20px;
}
#advanced-el-form {
	text-align: center;
}

/* 列表 */
:deep(#bus_detail_list_table) {
	tr:nth-child(even) {
		// background: #1c2b5d;
	}

	.el-table td {
		border: none;
	}

	.el-table th.is-leaf {
		border-bottom: none;
	}

	.el-table__header-wrapper,
	.el-table__footer-wrapper {
		border-bottom: 2px solid #ddd;
		border-image: linear-gradient(to right, rgba(18, 30, 71, 0.85) 30%, rgba(12, 216, 223, 0.91), rgba(153, 247, 250, 0.91)) 20 20;
	}
}

/* 分页 */

.table-operation-text {
	color: #ffffff;
	margin-left: 6px;
	text-decoration: underline;
	&:hover {
		color: #2beded;
	}
	&.active {
		color: #ff9a0c;
	}
}

:deep(.el-checkbox__input.is-checked) {
	background-color: #06cbcb;
}
.ico-wen {
	color: #fff;
	margin-top: -51px;
	position: absolute;
	z-index: 999;
	margin-left: 110px;
}

:deep(.el-table__expanded-cell) {
	background: #56698d;
}
:deep(.input-with-select .el-input-group__prepend) {
	background: red;
}
.style-split-yd-card {
	:deep(.el-card) {
		background-color: rgba(29, 39, 75, 0.31);
		border: unset;
		border-radius: 12px;
	}
}
.business-step-list {
	/*整个tab靠上*/
	:deep(.el-tabs__nav-scroll) {
		margin-top: 0px;
	}
	:deep(.el-tabs__nav) {
		margin-left: 12px;
	}
	/*整个tab选中样式*/
	:deep(.el-tabs__active-bar) {
		height: 0px;
	}
	:deep(.el-tabs--top .el-tabs__item.is-top:nth-child(2)) {
		padding-left: 20px;
	}
	:deep(.el-tabs--top .el-tabs__item.is-top:last-child) {
		padding-right: 20px;
	}
	/*tab文字样式设置白色*/
	:deep(.el-tabs__item) {
		color: #ffffff;
		font-size: 16px;
		font-weight: bold;
		height: 32px;
		line-height: 32px;
	}
	/*tab文字在选中时颜色*/
	:deep(.el-tabs__item.is-active) {
		color: #ffffff;
		border: 1px solid #2abcca;
		border-radius: 6px;
		background: #2abcca;
		background: -moz-linear-gradient(top, rgba(43, 237, 237, 0.1) 0%, rgba(43, 237, 237, 0.5) 100%);
		background: -webkit-linear-gradient(top, rgba(43, 237, 237, 0.1) 0%, rgba(43, 237, 237, 0.5) 100%);
		background: linear-gradient(top, rgba(43, 237, 237, 0.1) 0%, rgba(43, 237, 237, 0.5) 100%);
	}
	/*tab下面的线的颜色*/
	:deep(.el-tabs__nav-wrap::after) {
		background-color: transparent;
	}

	.relvanceDataIdClass {
		margin-bottom: 10px;
		color: #2beded;
	}
}
</style>
<style rel="stylesheet/scss" lang="scss"></style>
